import React, { useState } from 'react';
import { Card, Form, Input, Button, Alert, Typography, Space } from 'antd';
import { testPassword } from '../../api/auth';

const { Title, Text } = Typography;

const PasswordTest: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{ match: boolean; details: string } | null>(null);

  const onFinish = async (values: { username: string; password: string }) => {
    setLoading(true);
    try {
      const response = await testPassword(values.username, values.password);
      if (response.code === 200) {
        setResult(response.data);
      } else {
        setResult({ match: false, details: response.message || '测试失败' });
      }
    } catch (error) {
      setResult({ match: false, details: '网络错误或服务器异常' });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ padding: '24px' }}>
      <Title level={2}>密码测试工具</Title>
      <Text type="secondary">
        此工具仅供管理员调试使用，可以测试用户密码是否匹配
      </Text>

      <Card style={{ marginTop: 24, maxWidth: 600 }}>
        <Form
          name="passwordTest"
          onFinish={onFinish}
          layout="vertical"
          size="large"
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input placeholder="请输入要测试的用户名" />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password placeholder="请输入要测试的密码" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading}>
              测试密码
            </Button>
          </Form.Item>
        </Form>

        {result && (
          <Alert
            type={result.match ? 'success' : 'error'}
            message={result.match ? '密码匹配' : '密码不匹配'}
            description={
              <Space direction="vertical">
                <Text>{result.details}</Text>
                {result.match && (
                  <Text type="success">✓ 用户密码验证成功</Text>
                )}
                {!result.match && (
                  <Text type="danger">✗ 用户密码验证失败</Text>
                )}
              </Space>
            }
            showIcon
            style={{ marginTop: 16 }}
          />
        )}
      </Card>

      <Alert
        type="warning"
        message="安全提醒"
        description="此功能仅供开发和调试使用，请勿在生产环境中暴露给普通用户。"
        showIcon
        style={{ marginTop: 24, maxWidth: 600 }}
      />
    </div>
  );
};

export default PasswordTest; 